<template>
	<view>
		<view class="listItemFlex" @click="gotoPage('/pages/player/player?tvId=' + item.id)">
			<view class="itemIMgBox itemHitShiow">
        <u--image :showLoading="true" :src="item.tvImage" width="190rpx" height="260rpx" radius="16"></u--image>
				<view class="itemNum">
          <u--image :showLoading="true" src="/static/benefit/path.png" width="18rpx" height="24rpx" style="margin-right: 5rpx;"></u--image>
<!--					<image src="../static/benefit/path.png" mode="" class="NumIcon"></image>-->
          {{item.view}}播放
				</view>
			</view>
			<view class="itemInfo">
				<view class="infoTitle">{{item.tvName}}</view>
				<view class="infoType">{{item.classify}}</view>
				<view class="infoInfo">{{item.introduce}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {gotoPage} from "../utils/common";

  export default {
		name: "listItem",
		props: {
			item:{
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		},
    methods: {
      gotoPage,
			gotoTv() {

			}
		}
	}
</script>

<style lang="scss" scoped>

	.listItemFlex {
		display: flex;

    .itemHitShiow {
      --text: '新剧';
      &::after {
        content: var(--text);
        position: absolute;
        top: 0;
        right: 0;
        color: #FFFFFF;
        z-index: 2;
        width: 70rpx;
        height: 34rpx;
        border-radius: 0 16rpx 0 16rpx;
        background-color: #E81F4B;
        text-align: center;
        font-size: 24rpx;
      }
    }

		.itemIMgBox {
			position: relative;
			height: 260rpx;

      .itemNum {
        position: absolute;
        bottom: 8rpx;
        right: 15rpx;
        z-index: 2;
        color: #FFFFFF;
        font-size: 24rpx;
        display: flex;
      }

		}

		.itemInfo {
			margin-left: 22rpx;
			padding: 15rpx 0 28rpx;

			.infoTitle {
				color: #2A2A2A;
				font-size: 28rpx;
				font-weight: 700;
			}

			.infoType {
				color: #5E5E5E;
				font-size: 20rpx;
        margin-top: 10rpx;
			}

			.infoInfo {
				color: #4F4E4E;
				font-size: 22rpx;
				margin-top: 14rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'pc',sans-serif;
			}
		}
	}
</style>
